<template>
  <div>
    <section class="d-flex py-3 px-1 text-blue fs-md border-bottom ai-center">
      <i @click="$router.back()" class="iconfont icon-Back" style="font-size: 1.5rem;"></i>
      <span class="pr-2 flex-1 text-ellipsis fs-weight">{{article.title}}</span>
      <span class="text-grey fs-sm">2020-05-02</span>
    </section>

    <div v-html="article.body" class="article-content px-3"></div>

    <!-- 相关资讯 -->
    <section class="px-3 pb-4 pt-2">
      <h3 class="d-flex text-blue fs-md ai-center mb-2">
        <i class="iconfont icon-news mr-2 fs-xl text-grey"></i>
        相关资讯
      </h3>
      <router-link
        v-for="(item, index) in article.related"
        :key="index"
        tag="div"
        :to="`/articles/${item._id}`"
        class="d-flex text-dark py-1 fs-md"
      >
        <span class="flex-1 text-ellipsis pr-2">{{item.title}}</span>
        <span class="text-grey">2020-05-02</span>
      </router-link>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      article: {}
    };
  },
  watch: {
    id: "fetch"
  },
  created() {
    this.fetch();
  },
  methods: {
    async fetch() {
      let res = await this.$http.get(`articles/${this.id}`);
      this.article = res.data;
    }
  }
};
</script>

<style lang="scss">
.article-content {
  line-height: 1.5;
  img {
    width: 100%;
  }
}
</style>